<template>
    <Map :map-data="worldData" :config="config" />
</template>

<script setup>
import {ref, onBeforeMount} from 'vue';
import $ from 'jquery';
import _ from 'lodash';
import {graphic} from 'echarts/core';
import Map from '../components/Map.vue';
import word from '../assets/world.json';
import nameMap from '../assets/world.js';
const price = require('../assets/price.jpg');
import {chinaData} from '../utils';
const uploadedDataURL = 'https://www.isqqw.com/asset/get/s/data-1598770376853-S8m1N7TvW.json';

const points = [
    {value: [86.25167, 45.44452], name: '西北', num: 123},
    {value: [113.56913, 39.85388], name: '华北', num: 123},
    {value: [114.32099, 32.44534], name: '华中', num: 12.3},
    {value: [121.08968, 29.74876], name: '华东', num: 123},
    {value: [109.53131, 23.18507], name: '西南', num: 123},
    {value: [129.83103, 46.89552], name: '东北', num: 123},
];

const worldData = ref();

const colorLinear = colorList => {
    const start = colorList[0];
    const end = colorList[1];
    const direction = colorList?.[2] || [0, 0, 0, 1];
    return new graphic.LinearGradient(...direction, [
        {offset: 0, color: start}, // 渐变起始颜色
        {offset: 1, color: end}, // 渐变结束颜色
    ]);
};

const base = {
    zoom: 5,
    center: [112.97, 35.71],
    roam: false,
    emphasis: {
        disabled: true,
    },
};

const list1 = colorLinear(['#76e6f1', '#77c5f6']);

const config = ref({
    backgroundColor: '#b6cade',
    visualMap: {
        right: 26,
        bottom: 40,
        showLabel: !0,
        pieces: [
            {
                gte: 0,
                lte: 30,
                label: '运费较低城市',
                color: '#61acf7',
            },
            {
                gt: 30,
                lte: 70,
                label: '运费适中城市',
                color: '#6acbf3',
            },
            {
                gt: 70,
                lte: 100,
                label: '运费靠前城市',
                color: list1,
            },
        ],
        show: !0,
    },
    geo: {
        map: 'china',
        // 这里必须定义，不然后面series里面不生效
        tooltip: {
            show: false,
        },
        silent: true,
        show: true,
        roam: false,
        emphasis: {
            disabled: true,
            areaColor: '#00F1FF',
        },
        ...base,
        z: 1,
    },
    series: [
        {
            name: 'china',
            type: 'map',
            map: 'china',
            label: {
                show: true,
            },
            z: 2,
            ...base,
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1.5,
            },
            emphasis: {
                disabled: true,
            },
            nameMap,
            ...base,
            data: chinaData,
        },
        {
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
                show: true,
                color: '#43AEFE',
                offset: [0, 10],
                formatter: function (params) {
                    const val = params.data.num;
                    return `{val|${val}}{text|万}`;
                },
                rich: {
                    val: {
                        padding: [10, 5],
                        color: '#43AEFE',
                        fontSize: 20,
                        align: 'center',
                        fontWeight: 400,
                    },
                    text: {
                        color: '#43AEFE',
                        fontSize: 14,
                        verticalAlign: 'middle',
                        padding: [5, 0],
                        fontWeight: 400,
                    },
                },
            },
            itemStyle: {
                opacity: 1,
            },
            
            animation: false,
            symbol: 'image://' + price,
            large: true,
            symbolSize: [85, 62],
            data: points,
            z: 999,
        },
    ],
});

const getMapData = () => {
    $.get(uploadedDataURL, res => {
        worldData.value = word;
    });
};

const handleInit = () => {
    getMapData();
};

onBeforeMount(() => {
    handleInit();
});
</script>

<style scoped>
:deep(.chart) {
    height: 700px !important;
}
</style>
